<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel">
        <div class="systemImage">
            <div class="systemImg-dark-img-common" @click="pitchImg(i)" :class="{'systemImg-dark-img-common-hover':i==key}" v-for="(i,index) in 9" :key="index">
                <div v-if="key ==i" class="systemImg-dark-img-common-icon"><my-icon type="iconicon"></my-icon></div>
                <img :src="require('@/image/fastImg/'+i+'.png')">
            </div>
        </div>
    </rx-dialog>
</template>

<script>
import {Util} from "@lowcode/jpaas-common-lib";
export default {
    name: "systemImage",
    props:['layerid','destroy','lydata','config'],
    data(){
        return{
            key:1
        }
    },
    created(){
        this.init()
    },
    methods:{
        init(){
            this.key = this.config.banner.systemImage
        },
        pitchImg(i){
            this.key = i
        },
        handleSubmit(){
            Util.closeWindow(this, "ok", this.key);
        },
        cancel() {
            Util.closeWindow(this, "cancel");
        },
    }
}
</script>

<style scoped lang="less">
.systemImage{
    display: flex;
    flex-wrap: wrap;
}
.systemImg-dark-img-common:hover{
    border: solid 2px #4285f4;
}
.systemImg-dark-img-common-hover{
    border: solid 2px #4285f4!important;
}
.systemImg-dark-img-common{
    width: calc(33.3% - 20px);
    margin: 10px;
    height: 104px;
    background-color: #f4f4f4;
    position: relative;
    border-radius: 4px;
    display: flex;
    align-items: center;
    border: solid 2px white;
    overflow: hidden;
    cursor: pointer;
    .systemImg-dark-img-common-icon{
        position: absolute;
        top:0px;
        right: 0px;
        height:0px;
        width: 0px;
        border:14px solid;
        border-color:#4285f4  #4285f4 transparent  transparent ;
        color: white;
        i{
            margin-top: -13px;
            display: block;
        }
    }
    img{
        max-width: calc(100% - 10px);
        background-size: 100% 100%;
        object-fit: cover;
        margin: auto;
    }
}
</style>